<template>
  <div class="head">
    <img v-if="!backimg" src="../image/icon-back.png" class="back-btn" @click="toback"/>
    <div class="head-title">{{ msg }}</div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Sence from '../sence/Sence';

@Component
export default class Head extends Sence {
  @Prop() private msg!: string;
  @Prop() public backimg!: boolean;

  public toback():void{
    // console.log(document.referrer);
    if (window.history.length <= 1) {
      (this as any).$router.push('/')
    }else {
      (this as any).$router.go(-1);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .head
     position sticky
     top 0
     width 100vw
     text-align center
     height 45px
     line-height 45px
     background #4876ff
     z-index 99
  .back-btn
     position absolute
     top 13px
     left 20px
     width 20px
     height 20px
  .head-title
     font-size 17px
     font-weight bold
     color white
</style>
